<!-- 新增和编辑弹窗 -->
<template>
  <a-modal
    :width="800"
    :visible="visible"
    title="详情"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    :footer="null"
  >
    <a-descriptions bordered :column="2" size="default">
      <a-descriptions-item label="设备ID">{{ form.recordId }}</a-descriptions-item>
      <a-descriptions-item label="信号强度">{{ form.signalLevel }}</a-descriptions-item>
      <a-descriptions-item label="温度">{{ form.temperature }} ℃</a-descriptions-item>
      <a-descriptions-item label="A相电压">{{ form.avoltageNum }} V</a-descriptions-item>
      <a-descriptions-item label="B相电压">{{ form.bvoltageNum }} V</a-descriptions-item>
      <a-descriptions-item label="C相电压">{{ form.cvoltageNum }} V</a-descriptions-item>
      <a-descriptions-item label="A相电流">{{ form.acurrentNum }} A</a-descriptions-item>
      <a-descriptions-item label="B相电流">{{ form.bcurrentNum }} A</a-descriptions-item>
      <a-descriptions-item label="C相电流">{{ form.ccurrentNum }} A</a-descriptions-item>
      <a-descriptions-item label="总有功功率">{{ form.activePowerTotal }} W</a-descriptions-item>
      <a-descriptions-item label="A相有功功率">{{ form.aactivePower }} W</a-descriptions-item>
      <a-descriptions-item label="B相有功功率">{{ form.bactivePower }} W</a-descriptions-item>
      <a-descriptions-item label="C相有功功率">{{ form.cactivePower }} W</a-descriptions-item>
      <a-descriptions-item label="总有无功功率">{{ form.reactivePowerTotal }} VAR</a-descriptions-item>
      <a-descriptions-item label="A相无功功率">{{ form.areactivePower }} VAR</a-descriptions-item>
      <a-descriptions-item label="B相无功功率">{{ form.breactivePower }} VAR</a-descriptions-item>
      <a-descriptions-item label="C相无功功率">{{ form.creactivePower }} VAR</a-descriptions-item>
      <a-descriptions-item label="总视在功率">{{ form.apparentPowerTotal }} VA</a-descriptions-item>
      <a-descriptions-item label="A相视在功率">{{ form.aapparentPower }} VA</a-descriptions-item>
      <a-descriptions-item label="B相视在功率">{{ form.bapparentPower }} VA</a-descriptions-item>
      <a-descriptions-item label="C相视在功率">{{ form.capparentPower }} VA</a-descriptions-item>
      <a-descriptions-item label="总功率因子">{{ form.powerFactorTotal }}</a-descriptions-item>
      <a-descriptions-item label="A相功率因数">{{ form.apowerFactor }}</a-descriptions-item>
      <a-descriptions-item label="B相功率因数">{{ form.bpowerFactor }}</a-descriptions-item>
      <a-descriptions-item label="C相功率因数">{{ form.cpowerFactor }}</a-descriptions-item>
      <a-descriptions-item label="A相电压频率">{{ form.avoltageFrequency }} Hz</a-descriptions-item>
      <a-descriptions-item label="B相电压频率">{{ form.bvoltageFrequency }} Hz</a-descriptions-item>
      <a-descriptions-item label="C相电压频率">{{ form.cvoltageFrequency }} Hz</a-descriptions-item>
      <a-descriptions-item label="总有功电能">{{ form.activeEnergyTotal }} kWh</a-descriptions-item>
      <a-descriptions-item label="总无功电能">{{ form.reactiveEnergyTotal }} kWh</a-descriptions-item>
    </a-descriptions>
  </a-modal>
</template>

<script>
import { reactive, toRefs, watchEffect } from 'vue';

export default {
  name: 'DevicePowerMonitorDataDetail',
  emits: ['update:visible'],
  props: {
    // 弹窗是否打开
    visible: Boolean,
    // 详情数据
    data: Object
  },
  setup(props, context) {
    const data = reactive({
      form: {}
    });

    const watch = watchEffect(() => {
      if (props.data) {
        data.form = Object.assign({}, props.data);
      }
    });

    const updateVisible = value => {
      context.emit('update:visible', value);
    };

    return {
      ...toRefs(data),
      watch,
      updateVisible
    };
  }
};
</script>

<style scoped></style>
